<template>
  <vxe-grid
    ref="xGrid"
    border
    stripe
    keep-source
    auto-resize
    sync-resize
    :loading="listLoading"
    :column-config="{ resizable: true }"
    :export-config="{}"
    :columns="tableColumn"
    align="left"
    show-overflow="tooltip"
    :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
  >
    <template #ID="{ row, rowIndex }">
      <el-icon v-if="row.status === '1'" class="icon">
        <SuccessFilled />
      </el-icon>
      <el-tag v-else-if="row.status === '2'" type="primary" effect="dark" round>
        {{ rowIndex + 1 }}
      </el-tag>
      <el-tag v-else-if="row.status === '3'" type="info" effect="dark" round>
        {{ rowIndex + 1 }}
      </el-tag>
    </template>
  </vxe-grid>
</template>

<script lang="ts" setup>
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()

  // 表格实例
  const xGrid = ref(null)
  // 加载状态
  const listLoading = ref<boolean>(false)

  const tableColumn = [
    {
      title: '审核进度',
      field: 'ID',
      width: 100,
      slots: { default: 'ID' },
    },
    { title: '审核步骤', field: 'teamNo', minWidth: 120 },
    { title: '审核人', field: 'teamName', minWidth: 120 },
    {
      title: '审核开始时间',
      field: 'meterName',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '审核完成时间',
      field: 'meterNo',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '审核结果',
      field: 'type',
      minWidth: 120,
      formatter: ({ cellValue }) => {
        return _discStore.getDictLabelForValue('audit_status', cellValue)
      },
    },
    { title: '说明', field: 'explanation', minWidth: 180 },
  ]

  const handleQuery = async () => {
    // try {
    //   listLoading.value = true
    //   const res: resPageProps = await getEnergyMeterList(formSearch)
    //   if (res && res.code === 0 && res.data) {
    //     xGrid.value.reloadData(res.data?.list || [])
    //     formSearch.total = res.data?.total
    //   } else {
    //     xGrid.value.reloadData([])
    //   }
    // } catch (e) {
    //   console.error('获取审核状态出错:', e)
    //   xGrid.value.reloadData([])
    // } finally {
    //   listLoading.value = false
    // }
  }
  onMounted(() => {
    handleQuery()
    xGrid.value.reloadData([
      {
        id: '1',
        teamNo: '1122',
        status: '1',
      },
      {
        id: '2',
        teamNo: '1122',
        status: '2',
      },
      {
        id: '3',
        teamNo: '1122',
        status: '3',
      },
    ])
  })
</script>

<style lang="scss" scoped>
  .icon {
    font-size: 22px;
    color: #67c23a;
  }
</style>
